import React, { useEffect, useState } from "react";
import { Table } from "antd";
import axios from "axios";
import { userURL } from "@/services/url";

interface IUser {
  id: number;
  username: string;
  password: string;
  email: string;
  is_active: boolean;
}

const columns = [
  {
    title: "ID",
    dataIndex: "id",
    key: "id"
  },
  {
    title: "用户名",
    dataIndex: "username",
    key: "username"
  },
  {
    title: "邮箱",
    dataIndex: "email",
    key: "email"
  },
  {
    title: "是否激活",
    dataIndex: "is_active",
    key: "is_active",
    render: (text: boolean) => <>{text ? "是" : "否"}</>
  }
];

const UserManagement: React.FC = () =>{
  const [data, setData] = useState<IUser[]>([]);
  useEffect(()=>{
    axios.get<IUser[]>(userURL.getAllUser)
    .then((res)=>{
      setData(res.data)
    })
  },[])
  return  <Table columns={columns} dataSource={data} />;
}

export default UserManagement;